<?php
/**
 * The Template for displaying category posts.
 *
 * @file      category.php
 * @author    Chinh Tran.
 * @link 	  http://phunuchungminh.com
 */
 
?>
<?php get_header();  ?>
<?php $cat_ID = get_query_var('cat');  ?>
<script>
	var num = 148; //number of pixels before modifying styles

	$(window).bind('scroll', function () {
		if ($(window).scrollTop() > num) {
			$('.video-nav').addClass('cate-menu-fixed');
		} else {
			$('.video-nav').removeClass('cate-menu-fixed');
		}
	});
</script>
<div class="wrapper">
		<div class="container">
			<div class="video-nav hidden-md hidden-sm hidden-xs">
				<ul>
                <?php $cate_name = get_category_by_slug("video"); ?>
                    <li> <a href="<?php echo esc_url( home_url( '/' ) ); ?>chuyen-muc/video"> Tất cả </a></li>
                    <?php 
                        $args = array(
                            'child_of'    =>$cate_name->term_id,
                            'title_li'     =>''
                        );
                    wp_list_categories( $args ); ?> 
                    <!--li> <a href="#"> Tất cả </a></li>
					<li> <a href="#"> Clip hài </a></li>
					<li> <a href="#"> Âm nhạc</a></li>
					<li> <a href="#"> Phim ảnh </a></li>
					<li> <a href="#"> Làm đẹp </a></li>
					<li> <a href="#"> Ẩm thực </a></li>
					<li> <a href="#"> Show thời trang </a></li>
					<li> <a href="#"> Game show </a></li-->
				</ul>
					
			</div><!--End navigation-->
            
            <div class="menu-select-box">
			<select>
        	  <option value="/tat-ca">Tất cả</option>
        	  <option value="/video/hai">Hài</option>
        	  <option value="/video/hoat-hinh">Hoạt hình</option>
        	  <option value="/video/lam-dep">Làm đẹp</option>
        	  <option value="/video/mon-ngon">Món ngon</option>
        	  <option value="/video/nhac">Nhạc</option>
        	  <option value="/video/phim">Phim</option>
			</select>
			</div>
                
	</div><!--End container-->
</div><!--End wrapper-->
<div class="content">
		<div class="wrapper">
			<div class="container">
				<div class="left-block full-width-md full-width-sm full-width-xs">
					<div class="video-feature-box full-width-xs">
                        <?php $postID_exclude = array();  
                                    $args = array(
                                        'cat'               =>$cat_ID,
                                        'post_type'         => 'video',
                                    	'posts_per_page'    => 1,
                                        );
                                    $the_query = new WP_Query($args);
                                    // The Loop
                                    if ( $the_query->have_posts() ) {
                                    	
                                    	while ( $the_query->have_posts() ) {
                                    		$the_query->the_post();
                                            array_push($postID_exclude,get_the_ID());
                                            ?>
                                            <div class="feature-news">
                    							<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;"><img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"></a>
                    							<a href="<?php esc_url(the_permalink())?>" class="video-cover"></a>
                    							<a href="<?php esc_url(the_permalink())?>" style="display: inline;"><h2> <?php the_title() ?> </h2></a>
                    							
                    						</div>
                                            
 						         <?php  }} wp_reset_postdata(); ?>
                    
						
						<div class="video-trend-tag hidden-xs">
							<ul class="items-list">
                                <?php  
                                    $args = array(
                                        'post_type' => 'video',
                                        'cat'                 =>$cat_ID,
                                    	'posts_per_page'      => 3,
                                        'post__not_in'        =>$postID_exclude,
                                        );
                                    $the_query = new WP_Query($args);
                                    // The Loop
                                    if ( $the_query->have_posts() ) {
                                    	
                                    	while ( $the_query->have_posts() ) {
                                    		$the_query->the_post();
                                            array_push($postID_exclude,get_the_ID());
                                            ?>
                                            <li>
            									<div class="news-item" style="position: absolute;"> 
            										<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img"><img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"></a>
            										<a href="<?php esc_url(the_permalink())?>" class="video-cover"></a>
            										<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                                                    <span class="time"> 12: 00</span>
            									</div>
            								</li>
                                            
 						         <?php  }} wp_reset_postdata(); ?>
							</ul>
						</div><!--End trend tag-->
					</div><!--End feature tag-->
					
					<div class="video-news-list">
                        <div class="block-head hidden-lg hidden-md hidden-sm visible-xs">
							<h2>Mới cập nhật</h2>
							<div class="video-left-part"> 
								<div class="audai-line"> </div>
							</div>
						</div>
						<div class="clear"> </div>
						<ul>
                            <?php  $args = array(
                                        'post_type' => 'video',
                                        'cat'                 =>$cat_ID,
                                    	'posts_per_page'      => 5,
                                        'post__not_in'        =>$postID_exclude,
                                        );
                                    $the_query = new WP_Query($args);
                                    // The Loop
                                    if ( $the_query->have_posts() ) {
                                    	
                                    	while ( $the_query->have_posts() ) {
                                    		$the_query->the_post();
                                            array_push($postID_exclude,get_the_ID());
                                            ?>
                                            <li>
            									<div class="news-item"> 
            										<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img"><img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"></a>
            										<a href="<?php esc_url(the_permalink())?>" class="video-cover"></a>
            										<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                                                    <span class="time" style="width: 100%; padding: 6px 0;color: #9B9A9A; font-size: 12px; float: none;"> 12: 00</span>
            									</div>
            								</li>
                                            
                            <?php  }} wp_reset_postdata(); ?>
                            
						</ul>
					</div>
				</div>
				<div class="right-block hidden-md hidden-sm hidden-xs">
					<div class="banner banner-300x250">
						<a href="#"> <img src="<?php echo get_template_directory_uri() ?>/images/banner_300x250.png" alt="logo"/></a>
					</div>
					<div class="trend-tag">
						<div class="trend-head">
							<h2> XU HƯỚNG ĐỌC TIN</h2>
						</div>
						<div class="clear"> </div>
						<div class="trend-content fslider carousel" id="slider">
							<ul class="slides">
                                <?php $tags = trend_tags(); ?>
                                <?php foreach($tags as $tag){?>
                                    <li style="background: <?php echo get_random_color(); ?>; margin-right: 5px !important;"> <a href="<?php echo get_tag_link($tag->term_id); ?> "> <?php echo $tag->name; ?> </a> </li>
                                <?php }?>	
							</ul>
						</div>
					</div><!--End trend tag-->
				</div><!--End banner-block-->
			</div><!--End container-->
		</div><!--End feature-wrap-->
		<div class="clear"> </div>
		<div class="wrapper">
			<div class="container hidden-sm hidden-xs">
				<div class="mostview-block cate">
					<div class="cate-bg"></div>
					<ul class="mostview-news-list slides">
                    
                    <?php  $args = array(
                                    'post_type' => 'video',
                                    'cat'                 =>$cat_ID,
                                	'posts_per_page'      => 12,
                                    'post__not_in'        =>$postID_exclude,
                                    );
                                $the_query = new WP_Query($args);
                                // The Loop
                                if ( $the_query->have_posts() ) {
                                	
                                	while ( $the_query->have_posts() ) {
                                		$the_query->the_post();
                                        ?>
                                        <li>
                							<div class="news-item"> 
                								<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img"><img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"/></a>
                								<a href="<?php esc_url(the_permalink())?>" class="video-cover"></a>
                								<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                                                <span class="time"> 12: 00</span>
                							</div>
                						</li>
                                        
	                       <?php }} wp_reset_postdata(); ?>
					</ul>
				</div><!--End mostview-block-->
				<div class="clear"> </div>
				<div class="banner-bottom-block hidden-sm hidden-xs">
					<div class="banner banner-728x90">
						<a href="#"> <img src="<?php echo get_template_directory_uri() ?>/images/banner_728x90.png" id="mouse-banner" alt="banner_728x90"/></a>
					</div>
					<div class="banner banner-300x250">
						<a href="#"> <img src="<?php echo get_template_directory_uri() ?>/images/banner_300x250.png" class="hide-banner" alt="logo"/></a>
					</div>
				</div>
			</div><!--End container-->
		</div><!--End wrapper-->
		<div class="clear"> </div>
		<div class="wrapper">
			<div class="container">
				<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
                            $args = array(
                                  'post_type'           =>'video',
                                  'cat'                 =>$cat_ID,
                   	              'posts_per_page'      => 16,
                                  'post__not_in'        =>$postID_exclude,
                                  'paged' => $paged
                              );
                              $the_query = new WP_Query($args);
                              // The Loop
                              if ( $the_query->have_posts() ) {?>
                                <ul class="video_lg-li large-items-list">
                              
                                  <?php  while ( $the_query->have_posts() ) {
                                            $the_query->the_post();
                                            array_push($postID_exclude,get_the_ID());?>
                                            <li>
                        						<div class="news-item" style="position: absolute;"> 
                        							<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img"><img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"/></a>
                        							<a href="<?php esc_url(the_permalink())?>" class="video-cover"></a>
                        							<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                        							<span class="time"> 12: 00</span>
                        						</div>
                        					</li>
                                            
         					      <?php  }?>
                                </ul>
                                
                           <div class="block-row">
                                <?php if($paged <= $the_query->max_num_pages-1) {?>
            					   <a href="<?php echo esc_url(get_category_link($cat_ID)).'?paged=' . ($paged+1); ?>" class="view_more_listnews">Xem thêm</a>
            					<?php } else{?>
                                    <a  class="view_more_listnews">Không còn tin để hiển thị</a>
                                <?php }?>
                                <div class="paginator">
                                    <?php if($the_query->max_num_pages > 1){ ?>
                						<ol>
                                            <?php
                                              if ($paged > 1) { ?>
                                              <li><a href="<?php echo esc_url(get_category_link($cat_ID)).'?paged=' . ($paged -1);?>" class="prev"><img src="<?php echo get_template_directory_uri() ?>/images/arrow-left.png"></a></li>
                                               
                                              <?php }
                                              for($i=1; $i <= $the_query->max_num_pages; $i++){?>
                                                <li><a href="<?php echo esc_url(get_category_link($cat_ID)).'?paged=' . $i; ?>" <?php echo ($paged==$i)? 'class="current page"':'class="page"';?> ><?php echo $i;?></a></li>
                                                
                        						 <?php
                                              }
                                              if($paged < $the_query->max_num_pages){?>
                                                   <li> <a href="<?php echo esc_url(get_category_link($cat_ID)).'?paged=' . ($paged + 1);?>" class="next"><img src="<?php echo get_template_directory_uri() ?>/images/arrow-right.png"></a></li>
                                              <?php } ?>
                							
                						</ol>
                                    <?php } ?>
            					</div>
            				</div>
                          <?php } wp_reset_postdata(); ?>
                
			</div>
		</div>
		
	</div><!--End content-->
<?php get_footer(); ?>